<template>
  <view class="message-container">
    <!-- 顶部导航 -->
    <view class="top-nav">
      <text class="nav-title">消息中心</text>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-wrapper">
        <button 
          class="filter-btn" 
          :class="currentFilter === 'all' ? 'active' : ''"
          @click="changeFilter('all')"
        >全部消息</button>
        <button 
          class="filter-btn" 
          :class="currentFilter === 'unread' ? 'active' : ''"
          @click="changeFilter('unread')"
        >
          未读消息
          <view class="unread-badge" v-if="unreadCount > 0">
            {{ unreadCount > 99 ? '99+' : unreadCount }}
          </view>
        </button>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="(msg, idx) in filteredMessages" 
        :key="idx"
        @click="gotoDetail(msg.id)"
      >
        <view class="unread-dot" v-if="!msg.isRead"></view>
        <view class="message-content">
          <text class="title">{{ msg.title }}</text>
          <text class="desc">{{ msg.content.slice(0, 30) + '...' }}</text>
          <text class="time">{{ formatTime(msg.time) }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty" v-if="filteredMessages.length === 0">
        <text class="empty-icon">📭</text>
        <text class="empty-text">
          {{ currentFilter === 'unread' ? '暂无未读消息' : '暂无消息记录' }}
        </text>
      </view>
    </view>

    <!-- 底部导航（传递当前页面路径） -->
    <bottom-nav :current-path="currentPagePath"></bottom-nav>
  </view>
</template>

<script>
import bottomNav from '@/pages/components/bottom-nav/bottom-nav.vue';

export default {
  components: { bottomNav },
  data() {
    return {
      currentPagePath: '/pages/User/message/message', // 传递当前页面路径
      currentFilter: 'all',
      messages: [],
      unreadCount: 0
    };
  },
  computed: {
    // 筛选消息
    filteredMessages() {
      return this.currentFilter === 'unread' 
        ? this.messages.filter(m => !m.isRead) 
        : this.messages;
    }
  },
  onLoad() {
    this.loadMessages();
  },
  onShow() {
    this.loadMessages();
    this.updateUnreadCount();
  },
  methods: {
    // 加载消息（模拟数据，实际对接接口）
    loadMessages() {
      let stored = uni.getStorageSync('userMessages') || [];
      if (stored.length === 0) {
        // 模拟3条消息
        const now = new Date().getTime();
        stored = [
          {
            id: 'msg1',
            title: '工单分配通知',
            content: '您的空调维修工单已分配给张师傅',
            time: now - 2 * 60 * 60 * 1000, // 2小时前
            isRead: false
          },
          {
            id: 'msg2',
            title: '系统通知',
            content: '平台将于9月15日维护',
            time: now - 24 * 60 * 60 * 1000, // 1天前
            isRead: true
          },
          {
            id: 'msg3',
            title: '工单完成提醒',
            content: '您的电视维修工单已完成',
            time: now - 48 * 60 * 60 * 1000, // 2天前
            isRead: false
          }
        ];
        uni.setStorageSync('userMessages', stored);
      }
      this.messages = stored;
    },

    // 切换筛选
    changeFilter(type) {
      this.currentFilter = type;
    },

    // 更新未读数量
    updateUnreadCount() {
      this.unreadCount = this.messages.filter(m => !m.isRead).length;
    },

    // 格式化时间
    formatTime(timestamp) {
      const d = new Date(timestamp);
      return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`;
    },

    // 跳转到消息详情
    gotoDetail(msgId) {
      // 标记为已读
      const idx = this.messages.findIndex(m => m.id === msgId);
      if (idx !== -1) {
        this.messages[idx].isRead = true;
        uni.setStorageSync('userMessages', this.messages);
        this.updateUnreadCount();
      }
      // 跳转详情页
      uni.navigateTo({ url: `/pages/User/message/detail?msgId=${msgId}` });
    }
  }
};
</script>

<style scoped>
.message-container {
  background: #f5f7fa;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background: #5555ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 99;
}
.nav-title {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.filter-bar {
  background: #fff;
  padding: 12px 15px;
  border-bottom: 1px solid #e5e6eb;
}
.filter-wrapper {
  display: flex;
  gap: 15px;
}
.filter-btn {
  flex: 1;
  padding: 8px 0;
  background: #f5f7fa;
  color: #86909c;
  font-size: 14px;
  border-radius: 8px;
  position: relative;
}
.filter-btn.active {
  background: #165dff;
  color: #fff;
}
.unread-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: #ff4d4f;
  border-radius: 50%;
  padding: 0 4px;
}

.message-list {
  padding: 10px 15px;
}
.message-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.message-item:active {
  background: #f9f9f9;
}
.unread-dot {
  width: 8px;
  height: 8px;
  background: #ff4d4f;
  border-radius: 50%;
  margin-top: 7px;
  margin-right: 12px;
}
.message-content {
  flex: 1;
}
.title {
  display: block;
  font-size: 16px;
  color: #272e3b;
  font-weight: 500;
  margin-bottom: 5px;
}
.desc {
  display: block;
  font-size: 14px;
  color: #4e5969;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.time {
  display: block;
  font-size: 12px;
  color: #86909c;
  text-align: right;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.empty-icon {
  font-size: 60px;
  color: #ddd;
  margin-bottom: 20px;
}
.empty-text {
  font-size: 14px;
  color: #86909c;
}
</style>